<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>货品详情 - {{ form.name }}</span>
      </div>

      <el-form ref="productForm" :model="form" v-loading="loading" label-width="85px" class="product-show">
        <el-form-item label="货品名称：">
            {{ form.name }}
        </el-form-item>
        <el-form-item label="所属店铺：">
          <router-link :to="{name:'products-show', params: {id: 2}}">
            <el-button type="text" size="small" style="font-size: 14px;" >{{ store.name }}</el-button>
          </router-link>
        </el-form-item>
        <el-form-item label="货品简介：">
            {{ form.info }}
        </el-form-item>
        <el-form-item label="货品价格：">
          {{ form.price }}元 / {{ form.unit }}
        </el-form-item>
        <el-form-item label="货品规格：">
          {{ form.spec }}
        </el-form-item>
        <el-form-item label="发货地址：">
          {{ form.address }}
        </el-form-item>
        <el-form-item label="物流方式：">
          <el-tag v-for="(item, index) in form.logistics_mode" :key="index" >{{ item }}</el-tag>
        </el-form-item>
        <el-form-item label="货品描述：">
          {{form.desc}}
        </el-form-item>
        <el-form-item label="货品封面：">
           <el-card v-if="form.cover_image" class="card-img" :body-style="{ padding: '0px'}">
            <a href="javascript:0" @click="imgPreview(form.cover_image)">
              <img :src="form.cover_image.url" class="image">
            </a>
          </el-card>
        </el-form-item>
        <el-form-item label="货品组图：">
          <el-card v-for="(item, index) in form.pic_group" :key="index" class="card-img" :body-style="{ padding: '0px'}">
            <a href="javascript:0" @click="imgPreview(item)">
              <img :src="item.url" class="image">
            </a>
          </el-card>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { show } from '@/api/product'

export default {
  name: 'order-creat',
  data() {
    return {
      store: {},
      form: {
        name: '',
        info: '',
        desc: '',
        spec: '',
        price: '',
        unit: '公斤',
        address: '',
        logistics_mode: [],
        cover_image: { name: '', url: '' },
        pic_group: []
      },
      loading: true
    }
  },
  created() {
    if (this.$route.params.id) {
      const id = this.$route.params.id // 货品ID
      show(id).then(res => {
        if (res.status === 'success') {
          this.store = res.data.store
          this.form.name = res.data.name
          this.form.price = res.data.price
          this.form.unit = res.data.unit
          this.form.info = res.data.info
          this.form.spec = res.data.spec
          this.form.address = res.data.address
          this.form.logistics_mode = res.data.logistics_mode
          this.form.desc = res.data.description
          this.form.cover_image = {
            name: '封面图片',
            url: res.data.cover_image_url
          }
          res.data.pic_group_url.forEach((ele, index) => {
            this.form.pic_group.push({ name: '图-' + (index + 1), url: ele })
          })
          this.loading = false
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  methods: {
    imgPreview(img) {
      this.$alert('<img src="' + img.url + '" alt="">', '', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        customClass: 'img-view',
        closeOnClickModal: true
      })
    }
  }
}
</script>

<style>
.img-view {
  width: auto;
  background: transparent;
  border: 0;
  padding: 0;
  overflow: inherit;
}
.img-view .el-message-box__headerbtn .el-message-box__close {
  background-color: #f56c6c;
  border-radius: 50%;
  color: #fff;
  padding: 2px;
}
.img-view .el-message-box__header {
  padding: 0;
  z-index: 99;
}
.img-view .el-message-box__content {
  padding: 0;
}
.img-view .el-message-box__message p {
  line-height: 0;
}
.img-view .el-message-box__headerbtn {
  top: -5px;
  right: -5px;
}
.img-view .el-message-box__btns {
  padding: 0;
}
</style>

<style lang="scss">
.store-creat {
  width: 60%;
}

.store-creat .line {
    text-align: center;
}
.store-creat .el-checkbox-group .el-checkbox {
  float: left;
  width: 160px;
  padding-right: 20px;
  margin: 0;
  padding: 0;
}
.product-show {
  .el-tag {
    margin-right: 10px;
  }
  .cover {
    width: 120px;
    height: 120px;
    display: inline-block;
    &+.cover {
      margin-left: 10px;
    }
  }
  .card-img {
    width: 120px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    img {
      width: 100%;
    }
  }
}
</style>

